<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>{{.sysname}}</title>
    <link rel="stylesheet" href="/static/css/newmain.css"/>
    <link rel="stylesheet" href="/static/css/top.css"/>
</head>
{{template "top.html" .}}
<body class="camslist_body">
<div class="sys_main">
    <form method="post" name="form" id="form"  >
        <div class="modal-headers">{{if eq .ACTION_NAME "Edit"}}列表配置编辑 {{else}} 列表配置新增 {{end}}</div>

        <button type="submit" name="submit" class="btn-yes addcams_button"
                id="submit">提交
        </button>
        <button type="button" class="btn-yes addcams_button close"
                onclick="self.location=document.referrer;">取消
        </button>
        <div class="sys_right_form">
            <input type="hidden" name="id" value="{{.Data.Id}}"/>
            <div class="modelrow">
                <label for="configId" class="form_labelText col-2"><span
                            class="required">*</span>配置ID：</label>
                <input name="configId" {{if eq .ACTION_NAME "Edit"}}readonly{{else}}{{end}} required
                       id="configId"
                       value="{{.Data.ConfigId}}" class="form_text col-16">
                <span id="checkName"></span>
            </div>

            <div class="modelrow">
                <table name="configjson" class="tab_pub">
                    <thead>
                    <tr align="left" style="margin-top: 12px;">
                        <th style="width: 10%">字段</th>
                        <th style="width: 10%">名称</th>
                        <th style="width: 10%">Style</th>
                        <th style="width: 10%">Class</th>
                        <th style="width: 10%">类型</th>
                        <th>可选项</th>
                        <th style="width: 6%">最大长度</th>
                        <th style="width: 6%">宽</th>
                        <th style="width: 6%">高</th>
                        <th style="text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{if eq .ACTION_NAME "Edit"}}
                        {{range $k,$v := $.JsonArr}}
                            <tr>
                                <td>
                                    <input name="field" required class="pageconfig-col-16" value="{{$v.field}}"
                                           maxlength="40">
                                </td>

                                <td>
                                    <input name="name" class="pageconfig-col-16" value="{{$v.name}}"
                                           maxlength="40">
                                </td>
                                <td>
                                    <select name="allowblank" class="pageconfig-col-16">
                                        <option value="true" {{if eq $v.allowblank "true"}} selected="selected" {{end}}>
                                            Yes
                                        </option>
                                        <option value="false" {{if eq $v.allowblank "false"}} selected="selected" {{end}}>
                                            No
                                        </option>
                                    </select>
                                </td>
                                <td>
                                    <select name="readonly" class="pageconfig-col-16">
                                        <option value="true" {{if $v.readonly}} {{if eq $v.readonly "true"}} selected="selected" {{end}} {{end}}>
                                            Yes
                                        </option>
                                        <option value="false"{{if $v.readonly}}  {{if eq $v.readonly "false"}} selected="selected" {{end}}{{end}}>
                                            No
                                        </option>
                                    </select>
                                </td>
                                <td>
                                    <select name="type" class="pageconfig-col-16">
                                        <option value="label" {{if eq $v.type "label"}} selected="selected" {{end}}>
                                            label
                                        </option>
                                        <option value="text" {{if eq $v.type "text"}} selected="selected" {{end}}>
                                            text
                                        </option>
                                        <option value="textarea" {{if eq $v.type "textarea"}} selected="selected" {{end}}>
                                            textarea
                                        </option>
                                        <option value="number" {{if eq $v.type "number"}} selected="selected" {{end}}>
                                            number
                                        </option>
                                        <option value="float" {{if eq $v.type "float"}} selected="selected" {{end}}>
                                            float
                                        </option>
                                        <option value="date" {{if eq $v.type "date"}} selected="selected" {{end}}>
                                            date
                                        </option>
                                        <option value="datetime" {{if eq $v.type "datetime"}} selected="selected" {{end}}>
                                            datetime
                                        </option>
                                        <option value="radio" {{if eq $v.type "radio"}} selected="selected" {{end}}>
                                            radio
                                        </option>
                                        <option value="checkbox" {{if eq $v.type "checkbox"}} selected="selected" {{end}}>
                                            checkbox
                                        </option>
                                        <option value="select" {{if eq $v.type "select"}} selected="selected" {{end}}>
                                            select
                                        </option>
                                        <option value="img" {{if eq $v.type "img"}} selected="selected" {{end}}>
                                            image
                                        </option>
                                        <option value="button" {{if eq $v.type "button"}} selected="selected" {{end}}>
                                            button
                                        </option>
                                        <option value="hidden" {{if eq $v.type "hidden"}} selected="selected" {{end}}>
                                            hidden
                                        </option>
                                        <option value="url" {{if eq $v.type "url"}} selected="selected" {{end}}>
                                            url
                                        </option>
                                        <option value="password" {{if eq $v.type "password"}} selected="selected" {{end}}>
                                            password
                                        </option>
                                        <option value="objarr" {{if eq $v.type "objarr"}} selected="selected" {{end}}>
                                            对象数组
                                        </option>
                                        <option value="subarr" {{if eq $v.type "subarr"}} selected="selected" {{end}}>
                                            子数组
                                        </option>
                                    </select>
                                </td>
                                <td>
                                    <input name="options" class="pageconfig-col-16" value="{{$v.options}}" 　
                                           maxlength="">　
                                </td>
                                <td>
                                    <input name="maxlength" type="number"
                                           class="pageconfig-col-16" value="{{$v.maxlength}}"
                                           maxlength="10" min="1" step="1">
                                </td>
                                <td>
                                    <input name="width" type="number"
                                           class="pageconfig-col-16" value="{{$v.width}}"
                                           maxlength="10" min="1" step="1">
                                </td>
                                <td>
                                    <input name="height" type="number"
                                           class="pageconfig-col-16" value="{{$v.height}}"
                                           maxlength="10" min="1" step="1">
                                </td>
                                <td class="td_center">
                                    <input type="button" class="btn btn-success" value=增加
                                           onclick="add_tr(this)"/>
                                    <input type="button" class="btn btn-success" value=删除
                                           onclick="del_tr(this)"/>
                                    <input type="button" class="btn btn-success" value=上移一行
                                           onclick="up_tr(this)"/>
                                </td>
                            </tr>
                        {{end}}
                    {{else}}
                        <tr>
                            <td>
                                <input name="field" required type="text" class="pageconfig-col-16"
                                       maxlength="40">
                            </td>

                            <td>
                                <input name="name" type="text" class="pageconfig-col-16"
                                       maxlength="40">
                            </td>
                            <td>
                                <select name="allowblank">
                                    <option value="true">Yes</option>
                                    <option value="false" selected>No</option>
                                </select>
                            </td>
                            <td>
                                <select name="readonly">
                                    <option value="true">Yes</option>
                                    <option value="false" selected>No</option>
                                </select>
                            </td>
                            <td>
                                <select name="type" onselect="selectType">
                                    <option value="label">label</option>
                                    <option value="text" selected>text</option>
                                    <option value="textarea">textarea</option>
                                    <option value="number">number</option>
                                    <option value="float">float</option>
                                    <option value="date">date</option>
                                    <option value="datetime">datetime</option>
                                    <option value="radio">radio</option>
                                    <option value="checkbox">checkbox</option>
                                    <option value="select">select</option>
                                    <option value="img">image</option>
                                    <option value="button">button</option>
                                    <option value="hidden">hidden</option>
                                    <option value="url">url</option>
                                    <option value="password">password</option>
                                    <option value="objarr">对象数组</option>
                                    <option value="subarr">子数组</option>
                                </select>
                            </td>
                            <td>
                                <input name="options" type="text" class="pageconfig-col-16"
                                       maxlength="512">
                            </td>
                            <td>
                                <input name="maxlength" type="number" class="pageconfig-col-16" value="45"
                                       maxlength="10" min="1" step="1">
                            </td>
                            <td>
                                <input name="width" type="number" class="pageconfig-col-16" value="45"
                                       maxlength="10" min="1" step="1">
                            </td>
                            <td>
                                <input name="height" type="number" class="pageconfig-col-16" value="45"
                                       maxlength="10" min="1" step="1">
                            </td>
                            <td class="td_center">
                                <input type="button" class="btn btn-success" value="新增"
                                       onclick="add_tr(this)"/>
                                <input type="button" class="btn btn-success" value="删除"
                                       onclick="del_tr(this)"/>
                                <input type="button" class="btn btn-success" value="上移"
                                       onclick="up_tr(this)"/>
                            </td>
                        </tr>
                    {{end}}
                    </tbody>
                </table>
            </div>

        </div>
    </form>
</div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script src="/static/js/jquery.validate.js"></script>
<script src="/static/js/jsbeautify.js"></script>
<script type='text/javascript'>

    function selectType() {
        let v = this.value, op = this.parentNode.parentNode.children[7].children[0];
        if (["radio", "checkbox", "select", "label"].indexOf(v) >= 0) {
            op.readOnly = false
        } else {
            op.readOnly = true
        }
    }

    function add_tr(obj) {
        var tr = $(obj).parent().parent();
        tr.after(tr.clone());
    }

    function up_tr(obj) {
        let tr = $(obj).parent().parent();
        let prev = tr.prev();
        tr.insertBefore(prev);
    }

    function del_tr(obj) {
        if (confirm("确定要删除吗？")) {
            let tableRows = $(obj).parent().parent().parent()[0]["rows"].length
            if (tableRows <= 1) {
                alert("最少保留一行数据")
                return
            }
            let tr = $(obj).parent().parent();
            tr.remove()
            return true
        } else {
            return false
        }

    }

    $(function () {
        $("[name='type']").change(selectType)
    })


</script>
</html>